<template>
  <div class="transparent" v-if="isVisible">
    <view class="container">
      <view class="close">
        <span class="x" @click="close">x</span>
      </view>
      <view class="payment-info">
        <view>订单号：{{ paymentParams.orderId }}</view>
        <view>金额：￥{{ (paymentParams.paymentAmount ?? 0).toFixed(2) }}</view>
      </view>
      <view class="pay" :class="{ isPaying }" @click="toPay">{{ isPaying ? '支付中' : '立即支付' }}</view>
    </view>
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { PaymentParams } from './simulate-payment-type'

const isVisible = ref(false)
const isPaying = ref(false)
const emits = defineEmits<{
  (e: 'cancelPayment', paymentParams: PaymentParams): void
  (e: 'onPayment', paymentParams: PaymentParams, isPaying: Ref<boolean>): void
}>()

const paymentParams = ref<PaymentParams>(new PaymentParams())
function close() {
  hide()
  // 触发用户取消支付事件
  emits('cancelPayment', paymentParams.value)
}
function emitPayment() {
  if (isPaying.value) return
  isPaying.value = true
  emits('onPayment', paymentParams.value, isPaying.value)
}
function callOut(_paymentParams: PaymentParams) {
  paymentParams.value = _paymentParams
  isVisible.value = isVisible.value = true
}
function hide() {
  // 关闭
  isVisible.value = false
}
async function toPay() {
  emitPayment()
}

defineExpose({
  callOut,
  hide
})
</script>

<style scoped lang="scss">
.transparent {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgb(0 0 0 / 46.1%);
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  width: 60%;
  min-height: 200px;
  border-radius: 30rpx;
  background: rgb(45 45 45);
  transform: translate(-50%, -50%);
  flex-direction: column;

  .close {
    width: 100%;
    line-height: 40rpx;

    .x {
      float: right;
      width: 50rpx;
      height: 50rpx;
      text-align: right;
      color: #fff;
    }
  }

  .payment-info {
    font-size: 30rpx;
    font-weight: 700;
    color: #fff;
    line-height: 50rpx;
    flex-grow: 1;
  }

  .pay {
    height: 65rpx;
    font-size: 35rpx;
    font-weight: 700;
    border-radius: 10rpx;
    text-align: center;
    color: #fff;
    background: #07c160;
    line-height: 60rpx;
  }

  .isPaying {
    background: #ccc;
  }
}
</style>
